<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            box-sizing: border-box;
        }
        .wrapper{
            position: relative;
            width: 240px;
        }
        .wrapper input{
            width: 100%;
        }
        .wrapper ul{
            position: absolute;
            top: 22px;
            width: 100%;
            border: 1px solid #ddd;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        .wrapper ul li{
            list-style: none;
            padding: 6px 8px;
        }
        .wrapper ul li:hover{
            cursor: pointer;
            background: rgba(0, 255, 225, 0.13);
        }
    </style>
</head>
<body>
<div class="wrapper">
    <input id="email-input" type="text">
    <ul id="email-sug-wrapper" class="email-sug"></ul>
</div>
</body>
</html>
<script>
    // 邮箱后缀List
    var postfixList = ['163.com', 'gmail.com', '126.com', 'qq.com', '263.net'];
    var input=document.getElementById('email-input');
    var ulcontent=document.getElementById('email-sug-wrapper');
    input.addEventListener('keyup',function(){
       var tooList= getTools();
       appendTools(tooList);
        inputli();
       show();
    });
    //获取用户输入
    function getMess(){
        return input.value;
    }
    //生成li列表
    function getTools(){
      var mess= getMess();
      var li='';
      var msg=mess;
      var newpost=postfixList;
      if(mess.indexOf('@')>-1){
          newpost=[];
          var postfix=mess.substring(mess.indexOf('@')+1,mess.length);
          msg=mess.substring(0,mess.indexOf('@'));
          for(var i=0;i<postfixList.length;i++){
              if(postfixList[i].indexOf(postfix)>-1){
                  newpost.push(postfixList[i])
              }
          }
      }
        for(var i=0;i<newpost.length;i++){
            li+='<li><span>'+msg+'@'+newpost[i]+'</span></li>';
        }
      return li;
    }
    //添加li到ul
    function appendTools(li){
        ulcontent.innerHTML='';
        ulcontent.innerHTML=li;
    }
    //选择列表
    function inputli(){
       var child = ulcontent.childNodes;
       for(var i=0;i<child.length;i++){
           child[i].addEventListener('click',function(){
               input.value=this.innerText;
               ulcontent.style.display='none';
           })

       }


    }
    function show(){
        if(getMess()){
            ulcontent.style.display='block'
        }else{
            ulcontent.style.display='none'
        }
    }
</script>
